// 导入React Hooks: useEffect 和 useRef，前者用于执行副作用操作，后者用于保存可变引用
import { useEffect, useRef } from "react";

// 导入@react-three/drei提供的useGLTF和useAnimations Hook
// useGLTF用于加载GLTF格式的3D模型，useAnimations则处理模型相关的动画
import { useGLTF, useAnimations } from "@react-three/drei";

// 导入本地存储的3D模型资源文件（这里是glTF格式的WW1风格飞机模型）
import planeScene from "../assets/3d/plane.glb";


// 定义名为Plane的3D组件，接受一个布尔型prop 'isRotating'以及其他扩展属性
export function Plane({ isRotating, ...props }) {
  // 创建一个ref来保存Three.js中的网格对象引用
  const ref = useRef();

  // 使用useGLTF Hook加载3D模型及其关联的动画数据
  const { scene, animations } = useGLTF(planeScene);

  // 使用useAnimations Hook获取模型的动画动作实例
  const { actions } = useAnimations(animations, ref);

  // 使用useEffect Hook监听isRotating的变化，当isRotating为真时开始播放动画
  // 注意：此处的动画名称“Take 001”应从3D模型所在的Sketchfab网站上获得
  useEffect(() => {
    if (isRotating) {
      actions["Take 001"].play();
    } else {
      actions["Take 001"].stop();
    }
  }, [actions, isRotating]); // 当依赖项发生变化时重新执行该效应

  // 返回一个mesh组件，其中包含实际的3D模型
  // 使用ref将mesh节点与3D模型相关联，以便在动画Hook中控制模型
  return (
    <mesh {...props} ref={ref}>
      {/* 使用primitive元素直接嵌入复杂的3D模型或场景 */}
      <primitive object={scene} />
    </mesh>
  );
}